<template>
	<view class="edit-list">
		<view class="edit-list-top">
			<text class="cancel" @click="cancel">取消</text>
			<text class="release" @click="release">保存</text>
		</view>
		<view class="edit-list-center">
			<input class="input" v-if="reviseType=='input'" v-model="infoName" placeholder="请输入" />
			<textarea v-if="reviseType=='textarea'" v-model="infoName" placeholder="请输入" />
			<view  class="checkbox-item"   v-for="(item,index) in checkList" :key="index">
				<evan-checkbox  v-if="reviseType=='checkbox'" @change="changeCheck($event,index)" v-model="item.isChoose" shape="square" primary-color="#B8212B"  >
						<text>{{ item.name }}</text>  
				</evan-checkbox>
			</view>
			
			<view  class="checkbox-item"   v-for="(item,index) in checkBox2List" :key="index">
				<evan-checkbox  v-if="reviseType=='checkbox2'" @change="changeCheck2($event,index)" v-model="item.isChoose" shape="square" primary-color="#B8212B"  >
						<text>{{ item.name }}</text>  
				</evan-checkbox>
			</view>
			
			<view class="date-interval"  v-if="reviseType=='dateInterval'">
				<view class="period-choose" @click="openCalendar">
					<input type="text" v-model="showDateRangName" placeholder="选择日期段" disabled />
				</view>
				<uni-calendar ref="calendar" :range="true" :insert="false" @confirm="confirm"></uni-calendar>
			</view>
			<view class="date-list" v-if="reviseType=='chooseData'">
				<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
					<view class="uni-input">{{date}}</view>
				</picker>
			</view>
			
			<view  v-if="reviseType=='chooseRegion'">
				<view class="choose-list" @click="chooseRegion">
					<input type="text" v-model="regionValue"  placeholder="选择地区" disabled />
				</view>
				<lb-picker ref="picker"  mode="multiSelector" v-model="regionValue"  :list="regionList" :level="3" :dataset="{ name: 'regionName' }"  
				@change="handleChange"   @confirm="handleConfirm"  @cancel="handleCancel" confirm-color="#B8212B" ></lb-picker>
			</view>
			
			<view class="choose-project"  v-if="reviseType=='lookup'">
				<view class="choose-box" @click="openProjectList">
					<input type="text" v-model="checkProject.name" placeholder="请选择项目" disabled/>
				</view>
				<view class="scroll-view" v-show="openProject">
					<scroll-view class="scroll-view-box" scroll-y="true">
						<view class="project-item" v-for="(item,index) in projectList" :key="index" :style="{background: item.isCheck?'#B8212B':''}"
						 @click="chooseProject(item,index)">
							<text class="project-title" :style="{color: item.isCheck?'#FFFFFF':''}">{{item.name}}</text>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import LbPicker from '@/components/lb-picker'
	import uniCalendar from '@/components/uni-calendar/uni-calendar.vue'
	import EvanCheckbox from '@/components/evan-checkbox/evan-checkbox.vue'
	import EvanCheckboxGroup from '@/components/evan-checkbox-group/evan-checkbox-group.vue'
	import api from '@/static/js/api.js'
	export default {
		name: 'EditList',
		components: {
			LbPicker,
			uniCalendar,
			EvanCheckbox,
			EvanCheckboxGroup,
		},
		watch: {
			projectModel(value) {
				this.checkProject = value;
			}
		},
		onLoad: function(option) {
			this.reviseType = option.reviseType;
			this.fieldModel = JSON.parse(option.fieldModel);
			this.checkBox2List = this[this.fieldModel.fields]
			this.getInfo();
			uni.setNavigationBarTitle({
			　　title:'编辑'+this.fieldModel.title
			})
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				fieldModel:{},
				openProject:false,
				sex:[{name:'男',isChoose:false},{name:'女',isChoose:false}],
				//工龄
				// work_years:[{name:'0.5',isChoose:false},{name:'1',isChoose:false},{name:'2',isChoose:false},{name:'3',isChoose:false},{name:'4',isChoose:false},{name:'5',isChoose:false},{name:'6',isChoose:false},{name:'7',isChoose:false},{name:'8',isChoose:false},{name:'9',isChoose:false},{name:'10-15',isChoose:false},{name:'16-20',isChoose:false},{name:'20以上',isChoose:false}],
				//工种等级
				work_type_grade:[{name:'普通工',isChoose:false},{name:'辅助工',isChoose:false},{name:'特种作业人员	',isChoose:false}],
				//文化程度
				education_degree:[{name:'空',isChoose:false},{name:'文盲',isChoose:false},{name:'半文盲',isChoose:false},{name:'小学',isChoose:false},{name:'初中',isChoose:false}
				,{name:'高中',isChoose:false},{name:'技工学校',isChoose:false},{name:'中专',isChoose:false},{name:'大学专科',isChoose:false},
				{name:'大学本科',isChoose:false},{name:'研究生',isChoose:false},{name:'博士',isChoose:false}],
				title:'请选择项目',
				checkBox2List:[],
				reviseType: '',
				regionName:'',
				infoName: '',
				chooseModel: '',
				regionValue:[],
				projectList: [
					{
						name: '上海金贸中心中心南大楼1',
						isCheck: false
					}, {
						name: '望角湖住宅地块(300#)二期',
						isCheck: false
					}, {
						name: '新建冷链仓储、办公楼、产品配送综合展示中心及辅楼',
						isCheck: false
					}, {
						name: '上海金贸中心中心南大楼1',
						isCheck: false
					}, {
						name: '望角湖住宅地块(300#)二期',
						isCheck: false
					}, {
						name: '新建冷链仓储、办公楼、产品配送综合展示中心及辅楼',
						isCheck: false
					}, {
						name: '上海金贸中心中心南大楼1',
						isCheck: false
					}, {
						name: '望角湖住宅地块(300#)二期',
						isCheck: false
					}, {
						name: '新建冷链仓储、办公楼、产品配送综合展示中心及辅楼',
						isCheck: false
					}, {
						name: '上海金贸中心中心南大楼1',
						isCheck: false
					}, {
						name: '望角湖住宅地块(300#)二期',
						isCheck: false
					}, {
						name: '新建冷链仓储、办公楼、产品配送综合展示中心及辅楼',
						isCheck: false
					}, {
						name: '上海金贸中心中心南大楼1',
						isCheck: false
					}, {
						name: '望角湖住宅地块(300#)二期',
						isCheck: false
					}, {
						name: '新建冷链仓储、办公楼、产品配送综合展示中心及辅楼',
						isCheck: false
					}, {
						name: '上海金贸中心中心南大楼1',
						isCheck: false
					}, {
						name: '望角湖住宅地块(300#)二期',
						isCheck: false
					}, {
						name: '新建冷链仓储、办公楼、产品配送综合展示中心及辅楼',
						isCheck: false
					}
				],
				checkProject: {},
				regionList:[
					{
						label:'江苏',
						value: '江苏',
						children:[
							{
								label:'苏州',
								value: '苏州',
								children:[
									{
										label:'相城区',
										value: '相城区',
									},
									{
										label:'吴江区',
										value: '吴江区',
									},
									{
										label:'阳澄湖',
										value: '阳澄湖',
									},
								]
							},
							{
								label:'镇江',
								value: '镇江',
								children:[
									{
										label:'相城区',
										value: '相城区'
									},
									{
										label:'吴江区',
										value: '吴江区'
									},
									{
										label:'阳澄湖',
										value: '阳澄湖'
										
									},
								]
							},
							{
								label:'无锡',
								value: '无锡',
								children:[
									{
										label:'相城区',
										value: '相城区',
									},
									{
										label:'吴江区',
										value: '吴江区',
									},
									{
										label:'阳澄湖',
										value: '阳澄湖',
									},
								]
							},
						]
					},
					{
						label:'河北',
						value: '河北',
						children:[
							{
								label:'苏州',
								children:[
									{
										label:'相城区'
									},
									{
										label:'吴江区'
									},
									{
										label:'阳澄湖'
									},
								]
							},
							{
								label:'镇江',
								children:[
									{
										label:'相城区'
									},
									{
										label:'吴江区'
									},
									{
										label:'阳澄湖'
									},
								]
							},
							{
								label:'无锡',
								children:[
									{
										label:'相城区'
									},
									{
										label:'吴江区'
									},
									{
										label:'阳澄湖'
									},
								]
							},
						]
					},
					{
						label:'河南',
						value: '河南',
						children:[
							{
								title:'苏州',
								children:[
									{
										title:'相城区'
									},
									{
										title:'吴江区'
									},
									{
										title:'阳澄湖'
									},
								]
							},
							{
								title:'镇江',
								children:[
									{
										title:'相城区'
									},
									{
										title:'吴江区'
									},
									{
										title:'阳澄湖'
									},
								]
							},
							{
								title:'无锡',
								children:[
									{
										title:'相城区'
									},
									{
										title:'吴江区'
									},
									{
										title:'阳澄湖'
									},
								]
							},
						]
					}
				],
				date: currentDate,
				showDateRangName:'',
				checkList: [
				],
				 
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		mounted() {

		},
		
		methods: {
			release() {
				api.write(this.fieldModel.modelName,{[`form-field-${this.fieldModel.fieldsType}-${this.fieldModel.fields}`]:this.infoName},this.fieldModel.modelId).then(res=>{
					uni.navigateBack();
					uni.$emit('reviseData');
				})
			},
			
			getInfo() {
				api.read(this.fieldModel.modelName, this.fieldModel.modelId,
					this.fieldModel.fields).then(
					res => {
						console.log(res)
						let _res = res[0];
						if(this.fieldModel.fieldsType == "many2one"){
							this.getManyToOneData(this.fieldModel.many2oneModel,_res[this.fieldModel.fields]);
						}else if(this.fieldModel.fieldsType == "select"){
							
							 // this.infoName = _res[this.fieldModel.fields];
							 this[this.fieldModel.selectName].forEach((item,index2)=>{
							 	if(item.name!=_res[this.fieldModel.fields]){
							 		item.isChoose = false;
							 	}else{
							 		item.isChoose = true;
									 this.infoName = _res[this.fieldModel.fields];
							 	}
							 })
						}
						 if(this.reviseType=="input"){
							 this.infoName = _res[this.fieldModel.fields];
					    }
					})
			},
			getManyToOneData(model,id){
				api.getManyToOneData(model).then(res=>{
					this.checkList = res.data.map(m=>{
						return{
							...m,
							isChoose:id==m.id
						}
					});
				})
			},
			cancel() {
				uni.navigateBack();
			},
			chooseRegion() {
				this.$refs.picker.show() // 显示
				// this.$refs.picker.hide() // 隐藏
			},
			openProjectList() {
				this.openProject=true
			},
			chooseProject(item,index) {
				this.projectList.forEach(res => {
					if (res.name == item.name) {
						// debugger
						res.isCheck = true;
						this.projectName = res.name;
					} else {
						res.isCheck = false;
					}
				});
				this.checkProject = item;
				this.$emit('change', item);
			},
			// formatter ({ item, rowIndex, columnIndex }) {
			//   return `${item.value}-${rowIndex}-${columnIndex}-${item.label}`
			// },
			handleChange (e) {
			  console.log('change::', e)
			},
			handleConfirm (e) {
			  // 如果存在多个picker，可以在picker上设置dataset属性，confirm中获取，就能区分是哪个picker了
			  console.log('confirm::', e)
			  if (e) {
			    const name = e.dataset.name
			    const label = e.item.map(m => m.label).join('-')
			    if (name && label) {
			      this[name] = label
			    }
			  }
			},
			handleCancel (e) {
			  console.log('cancel::', e)
			},
			bindDateChange: function(e) {
				this.date = e.target.value
			},
			changeCheck(value,index){
				this.checkList.forEach((item,index2)=>{
					if(index2!=index){
						item.isChoose = false;
					}else{
						this.infoName = item.id;
					}
				})
			},
			changeCheck2(value,index){
				this[this.fieldModel.selectName].forEach((item,index2)=>{
					if(index2!=index){
						item.isChoose = false;
					}else{
						this.infoName = item.name;
					}
				})
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				let hour= date.getHours();
				let minute= date.getMinutes();
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				if(this.reviseType=="chooseDataTime"){
					return `${year}-${month}-${day}     ${hour}:${minute}`;
				}else{
					return `${year}-${month}-${day}`;
				}
				
			},
			openCalendar() {
				this.$refs.calendar.open();
			},
			confirm(value) {
				this.dateModel = value.range;
				this.showDateRangName = value.range.before + ' 至 ' + value.range.after;
			},
			
		}
	}
</script>

<style lang="less" scoped>
	.edit-list {
		// overflow: hidden;
		height: 100vh;
		background: #F4F5F9;
	}

	.edit-list-top {
		/* width: 750rpx;
		height: 84rpx; */
		background: #FFFFFF;
		padding: 0rpx 32rpx 0rpx 34rpx;
		font-size: 32rpx;
		font-weight: 500;
		border-bottom: 2rpx solid #F4F5F9;
		line-height: 84rpx;

		.cancel {
			color: #666666;

			margin-right: 556rpx;
		}

		.release {

			color: #B8212B;
		}

	}

	.edit-list-center {
		background: #FFFFFF;
		font-size: 36rpx;
		font-weight: 500;
		color: #333333;
		line-height: 84rpx;
		padding: 30rpx 0rpx 30rpx 0rpx;
		.checkbox-item{
			padding-left: 32rpx;
			border-bottom: 2rpx solid #F4F5F9;
		}

		.input {
			// line-height: 100rpx;
			padding-left: 32rpx;
			padding-bottom: 10rpx;
			border-bottom: 2rpx solid #F4F5F9;
		}

		.check-box {
			

		}

		.choose-list {
			// width: 152rpx;
			// height: 64rpx;
			// background: #EFF0F1;
			// display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 8rpx;
			// margin-left: 20rpx;
			// border: 2rpx solid #F4F5F9;

			input {
				flex: 1;
				color: #333333;
				text-align: center;
				font-size: 28rpx;
				font-weight: 400;
				// margin-left: 20rpx;
			}
		}
        
		.date-list{
			display: flex;
			picker{
				margin-right:50rpx;
			}
		}
		.choose-project{
			.scroll-view{
				background: #F4F5F9;
				border: 2rpx solid #F4F5F9;
				padding: 10rpx;
				margin-top:40rpx ;
				font-size: 28rpx;
				font-weight: 400;
				color: #666666;
				
			}
			.project-title{
				
			}
		}
		
	}

	.edit-list-bottom {
		background: #FFFFFF;
		padding: 0rpx 32rpx 0rpx 34rpx;

		.remark {
			font-size: 22rpx;
			font-weight: 500;
			color: #999999;
			line-height: 44rpx;
		}
	}
</style>
